<template>
  <div class="loginByPC">
    <!-- 头 -->
    <header>
      <span class="logo">
        <router-link to="/home"><img src="../../assets/img/logo.png" alt /></router-link>
      </span>
      <span class="toHome">
        <router-link to="/home">首页</router-link>
      </span>
    </header>
    <!-- main -->
    <div class="main">
      <div class="tab">
        <div class="tabHead">
          <span :class="checked1? 'tabChecked': ''" @click="setTab1">密码登录</span>
          <span :class="checked2? 'tabChecked': ''" @click="setTab2">手机登录</span>
        </div>
        <div class="con" v-show="condition">
          <form>
            <input type="text" name="username" id="username" placeholder="请输入登录账户">
            <input :type="type? 'password': 'text'" name="password" id="password" placeholder="请输入密码" @focus="type=true">
            <button>登录</button>
          </form>
          <div class="loginInfo">
            <span>忘记密码?</span>
            <span>免费注册</span>
          </div>
          <div class="otherpc">
            <span>其它方式登录:</span>&nbsp;&nbsp;
            <img src="../../assets/img/qq.png" alt=""><span>QQ登录</span>&nbsp;&nbsp;
            <img src="../../assets/img/wx.png" alt=""><span>微信登录</span>&nbsp;&nbsp;
           <img src="../../assets/img/wb.png" alt=""><span>微博登录</span>
          </div>
          <div class="othermb">
            <span>其它方式登录</span>
            <div class="loginInfo">
               <p><img src="../../assets/img/qq2x.png" alt=""><span>登录</span></p>
               <p><img src="../../assets/img/wx2x.png" alt=""><span>微信登录</span></p>
               <p><img src="../../assets/img/wb2x.png" alt=""><span>微博登录</span></p>
            </div>
          </div>
        </div>
        <div class="con" v-show="!condition">
          <form>
            <input type="text"  placeholder="请输入手机号">
            <input type="text" id="yzhm"  placeholder="请输入验证码" ><button id="btn">发送验证码</button>
            <button>登录</button>
          </form>
          <div class="loginInfo">
            <span>忘记密码?</span>
            <span>免费注册</span>
          </div>
          <div class="otherpc">
            <span>其它方式登录:</span>&nbsp;&nbsp;
            <img src="../../assets/img/qq.png" alt=""><span>QQ登录</span>&nbsp;&nbsp;
            <img src="../../assets/img/wx.png" alt=""><span>微信登录</span>&nbsp;&nbsp;
           <img src="../../assets/img/wb.png" alt=""><span>微博登录</span>
          </div>
          <div class="othermb">
            <span>其它方式登录</span>
            <div class="loginInfo">
               <p><img src="../../assets/img/qq2x.png" alt=""><span>登录</span></p>
               <p><img src="../../assets/img/wx2x.png" alt=""><span>微信登录</span></p>
               <p><img src="../../assets/img/wb2x.png" alt=""><span>微博登录</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- footer -->
    <div class="footer">
      <div class="left">
           <div class="lcon">
             <div><img src="../../assets/img/person.jpg" alt=""></div>
             <div >
               <p>售前咨询热线</p>
               <span>400-0000-0000</span>
             </div>
           </div>
      </div>
      <div class="right">
        <div class="rcon">
          <div>
            <span>网站导航</span>
            <p>首页</p>
            <p>排行</p>
            <p>朋友圈</p>
          </div>
          <div>
            <span>关注网站</span>
            <p>电话: 400</p>
            <p>游戏: 400@qq.com</p>
            <p>地址: 成都市</p>
          </div>
          <div>
            <img src="../../assets/img/scanCode.jpg" alt="">
            <p>关注公众号</p>
          </div>
        </div>
      </div>
      <div class="bottom">
        <span class="b1">Copyright©2006～2019 成都吉胜科技有限责任公司版权所有 . 蜀ICP备05001520号-1 川公网安备 51019002001639号</span>
        <span class="b2">Copyright©2006～2019 成都吉胜科技有限责任公司版权<br>
          所有 . 蜀ICP备05001520号-1 <br>
          川公网安备 51019002001639号</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 控制tab栏切换
      active: 0,
      // 控制tab栏显示
      condition: true,
      // tab栏head样式
      checked1: true,
      checked2: false,
      // 密码框格式
      type: false
    }
  },
  methods: {
    setTab1 () {
      this.checked1 = true
      this.checked2 = false
      this.condition = true
    },
    setTab2 () {
      this.checked1 = false
      this.checked2 = true
      this.condition = false
    }
  }
}
</script>

<style lang="less" scoped>

// 保证页面高度100%
.loginByPC {
  height: 100%;
  background-color: #fff;
  font-size: 0.08rem;
}
// 头部
header {
  display: flex; /*弹性盒子*/
  // flex-flow: row nowrap;  /*子元素溢出父容器时换行*/
  justify-content: space-between; /*两端对齐，子元素之间有间隙*/
  margin: 0 15%;
  height: 10%;
  background-color: #fff;
  span {
    display: flex;
    align-items: center;
  }
}

// main
.main {
  position: relative;
  background: url('../..//assets/img/bg.jpg');
  background-repeat: no-repeat;
  background-position: 40% 0;
  height: 70%;
  .tab {
    position: absolute;
    right: 5%;
    top: 10%;
    width: 28%;
    height: 68%;
    background-color: #fff;
    .tabHead {
      display: flex; /*弹性盒子*/
      justify-content: space-between; /*两端对齐，子元素之间有间隙*/
      height: 16%;
      cursor: pointer;
      .tabChecked {
        background-color: #fff;
        color: #5385E6;
      }
      span {
        width: 50%;
        background-color: #ccc;
        display: flex;
        align-items: center; //垂直居中
        justify-content:center; //水平居中
      }
    }
    .con {
      height: 84%;
      box-sizing: border-box;
      position: relative;
      padding: 5% 10%;
    }
    form {
       background-color: #fff;
       input {
         box-sizing: border-box;
         width: 100%;
         height: 10%;
         margin-bottom: 4%;
         padding: 5% 5%;
         border: 0.1em solid #ccc;
       }
       button {
         border: none;
         width: 100%;
         padding: 3%;
         margin-bottom: 4%;
         background-color: #5385E6;
         color: #fff;
         cursor: pointer;
       }
       #yzhm {
         width: 70%;
       }
       #btn {
         width: 28%;
         margin-left: 2%;
       }
    }
  }
.loginInfo {
  display: flex;
  justify-content: space-between; /*两端对齐，子元素之间有间隙*/
  span {
    display: flex;
    align-items: center;
  }
}
.otherpc {
  position: absolute;
  bottom: 10%;
  span:not(:first-child) {
    cursor: pointer;
  }
  img {
    vertical-align: middle;
    cursor: pointer;
  }
}
.othermb {
    position: absolute;
    bottom: 4%;
    width: 88%;
    display: none;
    text-align: center;

 }
}

// footer
.footer {
  width: 100%;
  height: 30%;
  overflow: hidden;
  background-color: #333;
  > div{

    height: 80%;
    float: left;
  }
  .left {
    width: 45%;
    position: relative;
  }
  .right {
    width: 55%;
  }
  .lcon {
    position: absolute;
    right: 15%;
    top: 20%;
  }
  .lcon div,
  .rcon div {
    float: left;
    p{
      margin-bottom: 0;
      color: #575656;
    }
    span {
      font-size: 2em;
      color: #C0BDC0;
    }
  }
  .rcon {
    width: 100%;
  }
  .rcon div {
    span {
      font-size: 1.5em;
      color: #fff;
    }
  }
  .rcon {
    margin-top: 4%;
  }
  .rcon div {
    margin-right: 10%;
  }
  .bottom {
    width: 100%;
    height: 20%;
    background-color: #333;
    border-top: 0.1em solid #C0BDC0;
    text-align: center;
    padding-top: 1em;
    color: #575656;
    .b1 {
      display: block;
    }
    .b2 {
      display: none;
    }
  }
}
// 媒体查询
@media screen and (max-width: 1200px) {
  .loginByPC {
    font-size: 0.1rem;
  }
  header {
    margin: 0 12%;
  }
  .main {
    background-position: 45% 0;
    .tab {
      right: 5%;
      top: 10%;
      width: 40%;
      height: 75%;
    }
  }
}
@media screen and (max-width: 992px) {
  header {
    margin: 0 10%;
  }
  .main {
    background: skyblue;
    .tab {
      right: 10%;
      top: 7%;
      width: 80%;
      height: 80%;
      form {
       input {
         margin-bottom: 3%;
         padding: 2% 2%;
       }
       button {
         padding: 2%;
         margin-bottom: 3%;
       }
      }
    }
  }
  .footer {
    height: 45%;
    > div{
      width: 100%;
      clear: both;
    }
    .left {
      width: 100%;
      float: none;
      position: relative;
      height: 25%;
    }
    .right {
      width: 100%;
      height: 50%;
    }
    .lcon {
      height: 100%;
      right: 50%;
      top: 20%;
      transform: translate(50%, 0);
      p {
        margin-top: 16%;
      }
    }
    .rcon {
      box-sizing: border-box;
      overflow: hidden;
      justify-content: space-between; /*两端对齐，子元素之间有间隙*/
      display: flex;
      padding: 0 10%;
      div {
        margin-right: 0;
      }
    }
    .bottom {
    .b2 {
      display: block;
    }
    .b1 {
      display: none;
    }
  }
  }
}
@media screen and (max-width: 768px) {
  header {
    margin: 0 5%;
    .toHome {
      display: none;
    }
  }
  .main {
    background: skyblue;
    .tab {
      right: 5%;
      top: 5%;
      width: 90%;
      height: 90%;
      form {
       input {
         margin-bottom: 4%;
         padding: 3% 3%;
       }
       button {
         padding: 2%;
         margin-bottom: 4%;
       }
      }
      .con {
        padding: 5% 6%;
      }
    }
  }
  .footer {
    .left {
      .lcon {
        p {
          margin-top:25%;
        }
      }
    }
  }
}
@media screen and (max-width: 480px) {
  header {
    margin: 0 3%;
  }
  .main {
    background: skyblue;
    .tab {
      right: 3%;
      top: 5%;
      width: 94%;
      height: 90%;
      form {
       input {
         margin-bottom: 4%;
         padding: 5% 5%;
       }
       button {
         padding: 3%;
         margin-bottom: 4%;
       }
      }
      .con {
        padding: 6% 6%;
      }
      .othermb {
        display: block;
      }
      .otherpc {
        display: none;
      }
   }
  }
  .footer {
    .left {
      .lcon {
        span {
          font-size: 1.3em;
        }
        p {
          margin-top: 30%;
        }
      }
    }
    .right {
      .rcon {
        span {
          font-size: 1.2em;
        }
      }
    }
  }
}
</style>
